<%--
  Created by IntelliJ IDEA.
  User: ZTK
  Date: 2025/6/13
  Time: 23:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <title>二手平台 - 登录</title>
  <link href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap-icons.css">
  <style>
    :root {
      --primary-color: #ff5000;
      --secondary-color: #f5f5f5;
    }

    body {
      background-color: #f5f5f5;
      min-height: 100vh;
      display: flex;
      align-items: center;
    }

    .login-container {
      max-width: 400px;
      margin: 0 auto;
      padding: 30px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .logo {
      text-align: center;
      margin-bottom: 30px;
    }

    .logo h2 {
      color: var(--primary-color);
      font-weight: bold;
    }

    .form-control:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.2rem rgba(255, 80, 0, 0.25);
    }

    .btn-primary {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
    }

    .btn-primary:hover {
      background-color: #e04800;
      border-color: #e04800;
    }

    .footer-links {
      text-align: center;
      margin-top: 20px;
    }

    .footer-links a {
      color: #666;
      text-decoration: none;
      margin: 0 10px;
    }

    #toSigin{
      color: #4d5154;
      text-decoration: none;
    }

    .chaoLianJie{
      text-underline: none !important;
    }

    .action-message {
      position: fixed;
      top: 70px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1050;
      padding: 10px 20px;
      border-radius: 5px;
      background-color: #4CAF50;
      color: white;
      font-weight: bold;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
      display: none;
      max-width: 80%;
      text-align: center;
    }

    .action-message.error {
      background-color: #f44336;
    }

    .error-message {
      color: #f44336;
      font-size: 14px;
      margin-top: 5px;
      display: none;
    }
  </style>
</head>
<body>
<div class="action-message" id="actionMessage"></div>

<div class="container">
  <div class="login-container">
    <div class="logo">
      <h2>二手交易平台</h2>
    </div>

    <!-- 错误消息容器 -->
    <c:if test="${not empty error}">
      <div class="alert alert-danger" role="alert" id="errorAlert">
        <i class="bi bi-exclamation-circle"></i> ${error}
      </div>
    </c:if>

    <form action="${pageContext.request.contextPath}/user/login" method="post">
      <div class="mb-3">
        <label for="username" class="form-label">用户名</label>
        <input type="text" class="form-control" id="username" name="username" required>
      </div>
      <div class="mb-3">
        <label for="password" class="form-label">密码</label>
        <input type="password" class="form-control" id="password" name="password" required>
        <div id="passwordError" class="error-message"></div>
      </div>
      <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="remember">
        <label class="form-check-label" for="remember">记住我</label>
      </div>
      <button type="submit" class="btn btn-primary w-100">登录</button>
    </form>
    <div class="mt-3 text-center">
      <a href="${pageContext.request.contextPath}/user/register" id="toSigin">还没有账号？立即注册</a>
    </div>
    <div class="footer-links">
      <a href="${pageContext.request.contextPath}/help_center.jsp" class="chaoLianJie">帮助中心</a>
      <a href="${pageContext.request.contextPath}/xieyi.jsp" class="chaoLianJie">隐私政策与用户协议</a>
    </div>
  </div>
</div>

<script src="${pageContext.request.contextPath}/resources/js/jquery-3.6.0.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script>
<script>

  function showMessage(message, isError = false) {
    const messageDiv = $('#actionMessage');
    messageDiv.text(message);
    messageDiv.removeClass('error');
    if (isError) {
      messageDiv.addClass('error');
    }
    messageDiv.fadeIn();

    setTimeout(() => {
      messageDiv.fadeOut();
    }, 5000);
  }

  $(document).ready(function() {

    const errorAlert = $('#errorAlert');
    if (errorAlert.length) {
      showMessage(errorAlert.text(), true);

      setTimeout(() => {
        errorAlert.fadeOut();
      }, 3000);
    }

    $('form').on('submit', function() {
      const username = $('#username').val().trim();
      const password = $('#password').val().trim();
      let valid = true;

      $('.error-message').hide();

      if (username === '') {
        $('#username').addClass('is-invalid');
        valid = false;
      } else {
        $('#username').removeClass('is-invalid');
      }

      if (password === '') {
        $('#password').addClass('is-invalid');
        $('#passwordError').text('请输入密码').show();
        valid = false;
      } else {
        $('#password').removeClass('is-invalid');
        $('#passwordError').hide();
      }

      return valid;
    });

    $('#username, #password').on('input', function() {
      $(this).removeClass('is-invalid');
      $('.error-message').hide();
    });
  });
</script>
</body>
</html>